<template>
  <div>
    <Card shadow>
      <div class="table-operator">
        <ButtonGroup>
          <Button type="primary" @click="handleSearch()">刷新</Button>&nbsp;
        </ButtonGroup>
      </div>
      <s-table :url="$apis.jobs.getLogs" :columns="columns" :params="pageParams" ref="table">
        <template slot="status" slot-scope="{ row }">
          <Badge v-if="row.status===1" status="success" text="成功"/>
          <Badge v-else="" status="error" text="失败"/>
        </template>
        <template slot="type" slot-scope="{ row }">
          <p v-if="row.cronExpression">cron表达式:{{ row.cronExpression }}</p>
          <p v-else="">调度时间:{{ row.startDate }} ~ {{ row.endDate }}</p>
        </template>
        <template slot="detail" slot-scope="{ row }">
          <Button
            size="small"
            type="text"
            @click="openDrawer(row)">详情</Button>
        </template>
      </s-table>
    </Card>
    <Modal width="50" :closable="false" v-model="drawer">
      <div slot="header">
        <Badge v-if="currentRow.status===1" status="success"/>
        <Badge v-else="" status="error"/>
        {{ currentRow.jobName }}
      </div>
      <div>
        <p><strong>执行类：</strong>{{ currentRow.jobClass }}</p>
        <p><strong>触发器：</strong>{{ currentRow.triggerClass }}</p>
        <p><strong>运行时长：</strong>{{ currentRow.runTime }} ms  </p>
        <p v-if="currentRow.cronExpression"><strong>cron表达式：</strong>{{ currentRow.cronExpression }}</p>
        <p v-else=""><strong>调度时间：</strong>: {{ currentRow.startDate }} ~ {{ currentRow.endDate }}</p>
        <strong>执行参数：</strong>
        <pre>
              {{ currentRow.jobData ? JSON.stringify(JSON.parse(currentRow.jobData), null, 4) : '' }}
        </pre>
        <strong>错误信息</strong>
        <pre>
          {{ currentRow.exception }}
        </pre>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'JobLogs',
  data () {
    return {
      drawer: false,
      currentRow: {},
      loading: false,
      pageParams: {
        jobName: ''
      },
      columns: [
        {
          title: '开始时间',
          key: 'runStartTime'
        },
        {
          title: '结束时间',
          key: 'runEndTime'
        },
        {
          title: '执行结果',
          key: 'status',
          slot: 'status'
        },
        {
          title: '耗时',
          key: 'runTime',
          render: (h, params) => {
            return h('div', (params.row.runTime ? params.row.runTime : 0) + ' ms')
          }
        },
        {
          title: '详情',
          slot: 'detail',
          fixed: 'right',
          width: 100
        }
      ],
      data: []
    }
  },
  methods: {
    openDrawer (data) {
      this.currentRow = data
      this.drawer = true
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    }
  },
  mounted: function () {
  }
}
</script>
